<template>
  <!-- vue3页面 -->
  <a-card :bodyStyle="{ padding: '0px 20px 10px' }">
    <template #title
      ><a href="javascript:;" @click="emit('back')">
        <ArrowLeftOutlined style="margin-right: 10px" />返回
      </a></template
    >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="会议信息">
        <a-descriptions bordered>
          <a-descriptions-item label="会议名称" :span="3">{{
            obj.conferenceName
          }}</a-descriptions-item>
          <a-descriptions-item label="申请人">{{
            obj.applyUser
          }}</a-descriptions-item>
          <a-descriptions-item label="申请时间	"
            >{{ obj.applyTime }}
          </a-descriptions-item>
          <a-descriptions-item label="所在单位">{{
            obj.inDepartment
          }}</a-descriptions-item>
          <a-descriptions-item label="届次">
            {{ obj.session }}
          </a-descriptions-item>
          <a-descriptions-item label="审核状态" :span="2">
            {{ obj.auditState ? "已审核" : "未审核" }}
          </a-descriptions-item>
          <a-descriptions-item label="会议议题" :span="3">
            {{ obj.conferenceAgenda }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">
            {{ obj.remark }}
          </a-descriptions-item>
          <a-descriptions-item label="附件" :span="3">
            {{ obj.files ? "" : "" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="2" tab="校工会审核">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{
            style: { width: '100px' },
          }"
          autocomplete="off"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="12">
              <a-form-item label="批复人" name="username">
                <a-input
                  v-model:value="formState.username"
                  placeholder="呆龙"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="批复时间" name="username">
                <a-input
                  v-model:value="formState.username"
                  placeholder="2022-10-22"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-item
                label="批复时间"
                name="username"
                :rules="[
                  { required: true, message: '请填写审核意见' },
                ]"
              >
                <a-textarea
                  v-model:value="formState.username"
                  placeholder="请填写您的批改意见"
                  :auto-size="{ minRows: 6, maxRows: 10 }"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-item
                label="上传附件"
                name="username"

              >
                              <!-- :rules="[
                  { required: true, message: '请上传附件' },
                ]" -->
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  :multiple="true"
                >
                  <a-button> 点击上传 </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" style="display: flex; justify-content: center">
              <a-button
                type="primary"
                danger
                style="padding: 0 100px; margin: 0 40px"
                >退回</a-button
              >
              <a-button
                html-type="submit"
                type="primary"
                style="padding: 0 100px; margin: 0 40px"
                >通过</a-button
              >
            </a-col>
          </a-row>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
const emit = defineEmits<{
  (event: "back"): void;
}>();
const props = defineProps<{
  auditId: string;
}>();
const activeKey = ref("2");
const obj = reactive({
  conferenceAgenda:
    "她发广经众解给山具红严心说。今看主容员厂队水下那则现长么。家在把质由标直论次表圆构少义改给克。区机低商九土江二题到育天合你斯九。数多专光专今维科住东山号性。作动天道拉空水亲改并大研得。",
  conferenceTime: "2008-01-28 16:54:03",
  session: "第五届第四届第五届第六次",
  inDepartment: "严断求决济深学院",
  conferenceType: "届中会",
  applyUser: "邵超",
  applyTime: "1992-10-03 14:16:20",
  inUnion: "族员入正数分工会",
  id: "52221bFD-AF23-2607-5C9B-65E0df77eefe",
  auditState: 0,
  conferenceName: "方率华术处不革证且型治头到完",
  remark: "利根始保革自二科做无真队时己知金图。",
  files: [],
});
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  console.log("Success:", values);
  console.log(props.auditId);
};
</script>

<style scoped></style>
